<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的加载事件</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        div{
            margin: 20px;
        }
        ul{
            margin-bottom: 20px;
        }
        ul span{
            display: inline-block;
            width: 20px;
        }
        ul button{
            padding: 0 10px;
            margin: 0 2px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //js的加载事件，会在网页元素全部加载完毕后执行
        //注意：是全部元素，包括DOM标签，图片资源，视频资源，视频资源，等等
        window.onload = function(){}

        //jQuery的加载事件，在DOM标签加载完毕后，离开执行
        //所以，如果希望你的js代码或者jQuery代码可以放到网页的任何地方
        //就必须将代码写到加载事件中
        $(document).ready(function(){

        })
        //简写
        $(function(){
            //删除按钮点击事件
            $('ul').on('click','.del',function(){
                $(this).parent('li').remove()
                sort()  //调用排序的方法
            })
            //上按钮点击事件
            $('ul').on('click','.up',function(){
                //获取当前li
                let cli = $(this).parents('li')
                //获取上一个li
                let uli = $(this).parents('li').prev()
                uli.before(cli)
                sort()  //调用排序的方法
            })
            //下按钮点击事件
            $('ul').on('click','.down',function(){
                //获取当前li
                let cli = $(this).parents('li')
                //获取下一个li
                let dli = $(this).parents('li').next()
                dli.after(cli)
                sort()  //调用排序的方法
            })
            //添加选项按钮点击事件
            $('.add').click(function(){
                let span = $('<span/>')
                let input = $('<input/>')
                let btn1 = $('<button class="up"/>').text('↑')
                let btn2 = $('<button class="down"/>').text('↓')
                let btn3 = $('<button class="del"/>').text('del')
                let li = $('<li/>')
                li.append(span)
                li.append(input)
                li.append(btn1)
                li.append(btn2)
                li.append(btn3)
                $('ul').append(li)
                sort()  //调用排序的方法
            })
            //排序方法
            let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
            function sort(){
                //循环ul里面的所有li
                $('ul>li').each(function(index,li){
                    //给li里面的span标签添加序号
                    $(li).find('span').text(str[index]+'.')
                    //第一个li里面的上按钮禁用
                    if(index===0){
                        $(li).find('button:eq(0)').prop('disabled',true)
                    }else{
                        $(li).find('button:eq(0)').prop('disabled',false)
                    }
                    //最后一个li里面的下按钮禁用
                    if(index===$('ul>li').length-1){
                        $(li).find('button:eq(1)').prop('disabled',true)
                    }else{
                        $(li).find('button:eq(1)').prop('disabled',false)
                    }
                })
            }
            sort()
        })  
    </script>
</head>
<body>
    <div>
        <ul>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
            <li><span></span><input><button class="up">↑</button><button class="down">↓</button><button class="del">del</button></li>
        </ul>
        <button class="add">添加选项</button>
    </div>
</body>
</html>